<template>
	<view>
		<view class="status_bar"></view>
		<view class="top_bg">
			<u-navbar :is-back="false" :background="background" :border-bottom="false">
				<view class="slot-wrap">
					<view class="nav-bar">
						<u-icon class="back" size="20px" @click="$p.back()" name="arrow-left"></u-icon>
						<text>我的钱包</text>
						<view @click="yemx" class="yuemx">
							余额明细
						</view>
					</view>
				</view>
			</u-navbar>
			<!-- 钱包余额 -->
			<view class="yue">
				<view class="">
					<view class="top">
						钱包余额
					</view>
					<view class="money">
						{{ userinfo.user_money }}
					</view>
				</view>

				<view class="button" @click="$p.navto('/pages/home/widthdrawlog')">即时提现记录</view>

				<!-- <image class="img" src="http://img.cpgm.cc/panda/static/my/bj.png" mode="widthFix"></image> -->
			</view>
		</view>

		<!-- 提现金额 -->
		<view class="center">
			<view class="bg_qiu">

			</view>
			<image class="xing" src="http://img.cpgm.cc/panda/static/my/xing.png" mode="widthFix"></image>
			<view class="text">
				提现金额
			</view>
			<image class="xing" src="http://img.cpgm.cc/panda/static/my/xing.png" mode="widthFix"></image>
		</view>
		<!-- 下面的金额 -->
		<view class="jine">
			<view v-for="(item, index) in list" :key="index" class="jine_son" @click="qie(index)"
				:class="[act == index ? 'active' : ' ']">
				{{ item.money }}元
			</view>
		</view>
		<!-- 提现金额 -->
		<view class="center">
			<view class="bg_qiu">

				<!-- hbuilderX -->
			</view>
			<image class="xing" src="http://img.cpgm.cc/panda/static/my/xing.png" mode="widthFix"></image>
			<view class="text">
				提现方式
			</view>
			<image class="xing" src="http://img.cpgm.cc/panda/static/my/xing.png" mode="widthFix"></image>
		</view>
		<!-- 支付宝提现 -->
		<view class="zhifb">
			<view class="left">
				<image class="img" src="http://img.cpgm.cc/panda/static/my/zfb.png" mode="widthFix"></image>
				<view class="">
					支付宝
				</view>
			</view>
			<view class="right" @click="zhifu">
				<image v-show="show" class="duigou" src="http://img.cpgm.cc/panda/static/my/dui.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 立即提现按钮 -->
		<view class="tixian_btn">
			<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="btn button"
				@click="cash()">立即提现</u-button>
		</view>
		<!-- 温馨提示 -->
		<view class="wenxin">
			<view class="tit">
				温馨提示
			</view>
			<view class="nei">
				<text>1、每个支付宝只能绑定一个平台账号，提现无手续费。</text><br>
				<text>2、每日可提现一次，每次最低0.1元。</text><br>
				<text>3、提现时间为9:00-17:00,节假日不休息,18:00左右自动结算 </text><br>
				<text>4、如未到账或收款方式填写错误请及时联系官方客服。</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				act: 0,
				show: true,
				background: {
					backgroundColor: 'transparent',
				},
				userinfo: uni.getStorageSync('userinfo'),
				list: [{
						id: 1,
						money: 0.1,
					},
					{
						id: 2,
						money: 20,
					},
					{
						id: 3,
						money: 50,
					},
					{
						id: 4,
						money: 100,
					},
					{
						id: 5,
						money: 500,
					},
					{
						id: 6,
						money: 1000,
					},
					{
						id: 6,
						money: 3000,
					},
				],
				stat: 0,
			};
		},
		onShow() {
			this.getUserInfo();
		},
		
		methods: {
			// 请求用户信息接口
			async getUserInfo() {
				this.$getUserInfo.getUserInfo((res) => {
					this.myinfo = res.data
					this.money = res.data.user_money;
					this.alicount = res.data.alipay_account;
				})
			},
			// 点击切换价格
			qie(ind) {
				this.act = ind
			},
			// /点击支付宝提现
			zhifu() {
				this.show = !this.show
			},
			// 点击余额明细
			yemx() {
				this.$p.navto('/pages/my/balanceDetails')
			},
			// 提现接口
			async cash() {
				if (this.alicount == '' || this.alicount == null) {
					this.isblind = 0;
					this.$u.toast('提现请先绑定收款方式')
				} else {
					let res = await this.$http.index.cash({
						money: this.list[this.act].money
					})
					this.$u.toast(res.msg);
					if (res.code == 1) {
						this.getUserInfo();
						this.withshow = false
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wenxin {
		padding: 0 20px;
		margin-top: 15px;

		.tit {
			font-size: 11px;
			font-weight: 500;
			color: #343434;
			margin-bottom: 10px;
		}

		.nei {
			font-size: 11px;
			font-weight: 500;
			color: #A1A1A1;
		}
	}

	.yuemx {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		font-weight: 500;
		color: #343434;
		z-index: 999;
	}

	.tixian_btn {
		padding: 0 20px;
		height: 57px;

		.btn {
			width: 100%;
			height: 57px;
			background: linear-gradient(360deg, #8BEAD1 0%, #70D7D3 100%);
			border-radius: 7px;
			text-align: center;
			line-height: 57px;
			font-size: 16px;
			font-weight: bold;
			color: #343434;
			margin-top: 25px;
		}
	}

	.zhifb {
		height: 31px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.img {
				width: 31px;
				height: 31px;
				margin-right: 10px;
			}

		}

		.right {
			width: 17px;
			height: 17px;
			background-color: #79ddd2;
			border-radius: 14px;

			.duigou {
				width: 13px;
				height: 15px;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}
		}

	}

	.jine {
		padding: 0 5px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 20px;

		.jine_son {
			width: 30%;
			height: 44px;
			background-color: #ededed;
			margin-bottom: 20px;
			border-radius: 10px;
			text-align: center;
			line-height: 44px;
			font-size: 14px;
			font-weight: 500;
			color: #A1A1A1;
		}

		.active {
			color: #131314;
			background-color: #77dcd3;
		}
	}

	.yue {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;

		.top {
			font-size: 14px;
			font-weight: 500;
			color: #131314;
		}

		.money {
			font-size: 29px;
			font-weight: bold;
			color: #131314;
		}

		.img {
			width: 72px;
			height: 81px;
		}

		.button {
			padding: 10px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 5px;
			color: #fff;
			font-size: 12px;
		}
	}

	.top_bg {
		// height: 350rpx;
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		background-size: 100% 100%;
		padding: 20px 0;

		.nav_back {
			position: relative;


		}
	}

	.center {
		position: relative;
		height: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
		margin-bottom: 40px;

		.text {
			font-size: 16px;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #131314;
			margin: 0 16px;
		}

		.xing {
			width: 12px;
			height: 12px;
		}

		.bg_qiu {
			position: absolute;
			width: 35px;
			height: 17px;
			border-radius: 10px;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		}
	}
</style>